import React, { useState, useEffect } from 'react'
import Taro, { useReachBottom, useDidShow } from '@tarojs/taro'
import { View, Image, Button } from '@tarojs/components'
import { Observer, useLocalStore } from 'mobx-react-lite'
import { meModel } from '@/model/MeModel'
import { cartModel } from '@/model/CartModel'
import { Icon } from '@/components/Icon'
import { network } from "@/utils/network";
import { NickNameModal } from '../components/NickModal'

import './index.scss'


export default () => {

  const store = useLocalStore(() => meModel)
  const cartStore = useLocalStore(() => cartModel)
  const [nickVis, setNickVis] = useState<boolean>(false);


  const handleChooseAvatar = async (e) => {
    const { detail: { avatarUrl } } = e
    const res = await network.post('/xxm/user/update', { avatarUrl });
    if (res.code === 0) {
      store.setUserInfo({ ...store.userInfo})
      Taro.showToast({
        title: '更新成功',
        icon: 'success'
      })
    }
  }

  const fetchUserInfo = () => store.getData()

  useDidShow(() => {
    fetchUserInfo();
  })

  return (
    <Observer>
      {
        () => {
          return (
            <View className='container'>
              <View className='header'>
                <View className='user__content'>
                  {store?.userInfo?.avatar ? (
                    <Image
                      className='user_avatar'
                      src={store?.userInfo?.avatar}
                    />
                  ) : (
                    <Button openType='chooseAvatar' onChooseAvatar={handleChooseAvatar} className='getAvatarBtn' size='mini'></Button>
                  )}
                  <View className='user__info'>
                    {
                      store.isLogin &&
                      <View 
                        onClick={() => {
                            setNickVis(true);
                          }}
                      >
                        <View className='user__nickname'>{store.userInfo?.nickname}</View>
                        <View className='user__level'>普通用户</View>
                      </View>
                    }
                    {
                      !store.isLogin &&
                      <View
                        className='user__level'
                        onClick={() => {
                          Taro.navigateTo({ url: '/pages/login/index' })
                        }}
                      >点击登录</View>
                    }
                  </View>
                  <Icon name='arrow-right' size={20} color='#ffffff' />
                </View>
                <View className='asset'>
                  <View
                    className='asset__item'
                    onClick={() => {
                      Taro.showToast({ icon: 'none', title: '开发中' });
                    }}
                  >
                    <View className='asset__number'>0</View>
                    <View
                      className='asset__name'
                    >我的积分</View>
                  </View>
                  <View
                    className='asset__item'
                    onClick={() => {
                      Taro.showToast({ icon: 'none', title: '开发中' });
                    }}
                  >
                    <View className='asset__number'>0</View>
                    <View className='asset__name'>我的余额</View>
                  </View>
                  <View
                    className='asset__item'
                    onClick={() => {
                      Taro.navigateTo({ url: '/pages/me/sub/coupon/index' });
                    }}
                  >
                    <View className='asset__number'>0</View>
                    <View className='asset__name'>优惠券</View>
                  </View>
                </View>
              </View>

              {/* <View className="box navigator__info">
                <View className="order__title">我的订单</View>
                <View className="order__status">
                  {
                    store.orderStatus.map((it: any, index: number) => (
                      <View
                        className="order__item"
                        onClick={() => {
                          Taro.navigateTo({ url: `/pages/ucenter/orders/index?status=${it.status}` })
                        }}
                      >
                        <View className="order__circle">

                          <Image
                            src={it.name}
                            className="order__circle__I"aImage                          />
                          {
                            store.statusNumber[index] > 0 &&
                            <Info
                              info={`${store.statusNumber[index]}`}
                              customStyle={{ top: 5, right: 1 }}
                            />
                          }
                        </View>
                        {it.text}
                      </View>
                    ))
                  }
                </View>
              </View> */}

              <View
                className='box'
                onClick={() => {
                  Taro.showToast({ icon: 'none', title: '开发中' });
                }}
              >
                <Image style={{ width: '100%', height: 80 }} src='http://xmmi.oss-cn-beijing.aliyuncs.com/icon/invite.png' />
              </View>

              <View className='box nav_lst'>
                <View
                  className='nav__item'
                  onClick={() => Taro.navigateTo({ url: '/pages/me/address/index' })}
                >
                  <View className='nav__circle'>
                    <Icon name='mudedi' size={30} color='#3D3D3D' />
                  </View>
                  地址管理
                </View>
                <View
                  className='nav__item'
                  onClick={() => {
                    Taro.showToast({ icon: 'none', title: '开发中' });
                  }}
                >
                  <View className='nav__circle'>
                    <Icon name='rili' size={30} color='#3D3D3D' />
                  </View>
                  我的预定
                </View><View
                  className='nav__item'
                  onClick={() => {
                    Taro.navigateTo({ url: '/pages/ucenter/rate/me' });
                  }}
                >
                  <View className='nav__circle'>
                    <Icon name='pinglun' size={30} color='#3D3D3D' />
                  </View>
                  我的评价
                </View>
              </View>

              {/* <View className="box navigator__info"> */}
              {/* <View className="box__item xxm-hairline--bottom">
                  <View className="box-label">我的地址</View>
                  <Icon name="arrow-right" size={14} color="#B2B2B2" />
                </View> */}
              {/* <View className="box__item xxm-hairline--bottom">
                  <View className="box-label">邀请好友</View>
                  <View className="box-color">送好友福利，得现金红包</View>
                  <Icon name="arrow-right" size={14} color="#B2B2B2" />
                </View> */}
              {/* <View className="box__item xxm-hairline--bottom">
                  <View className="box-label">我的预定</View>
                  <Icon name="arrow-right" size={14} color="#B2B2B2" />
                </View> */}
              {/* <View className="box__item">
                  <View
                    className="box-label"
                    
                  >我的评价</View>
                  <Icon name="arrow-right" size={14} color="#B2B2B2" />
                </View> */}
              {/* </View> */}

              <View className='box navigator__info'>
                <View className='box__item xxm-hairline--bottom'>
                  <View className='box-label'>联系客服</View>
                  <View
                    className='box-value'
                    onClick={() => {
                      Taro.makePhoneCall({
                        phoneNumber: cartStore.shopDetail.phone
                      })
                    }}
                  >
                    {cartStore.shopDetail.phone}
                  </View>
                  <Icon name='arrow-right' size={14} color='#B2B2B2' />
                </View>
                <View className='box__item xxm-hairline--bottom'>
                  <View className='box-label'>商家地址</View>
                  <View className='box-value'>{cartStore.shopDetail.address}</View>
                  <Icon name='arrow-right' size={14} color='#B2B2B2' />
                </View>
                <View
                  className='box__item xxm-hairline--bottom'
                  onClick={() => {
                    Taro.navigateTo({ url: '/pages/ucenter/about-shop/index' });
                  }}
                >
                  <View className='box-label'>关于商家</View>
                  <Icon name='arrow-right' size={14} color='#B2B2B2' />
                </View>
                <View
                  className='box__item'
                  onClick={() => {
                    Taro.navigateTo({ url: '/pages/ucenter/advise/index' });
                  }}
                >
                  <View className='box-label'>意见反馈</View>
                  <Icon name='arrow-right' size={14} color='#B2B2B2' />
                </View>
              </View>
              {/* <View className="box navigator__info">
                <View
                  className="box__item xxm-hairline--bottom"
                  onClick={() => {
                    Taro.navigateTo({ url: '/pages/ucenter/about-company/index' });
                  }}
                >
                  <Image
                    className="user_logo"
                    src={logo}
                  />
                  <View className="about-xiami box-label">了解虾米</View>
                  <Icon customIconStyle={{ lineHeight: '34px' }} name="arrow-right" size={14} color="#B2B2B2" />
                </View>
              </View> */}
              <NickNameModal nickName={store?.userInfo?.nickname} vis={nickVis} title='修改昵称' onClose={() => setNickVis(false)} fetchUserInfo={fetchUserInfo} />
            </View>
          )
        }
      }
    </Observer>
  )
}
